<template>
<div class="list-page pages">
  <Top></Top>
  <Nav></Nav>
  <div class="info-block" v-loading="imgLoading" v-if="type==1">
    <div class="info-item" v-for="item in imgList" :key="item.id" @click="goDetail(type,item.id,item.jump_url)">
      <img :src="item.url" alt="" class="img">
      <div class="name">
        {{item.name}}
      </div>
    </div>
  </div>
  <div class="info-block" v-loading="imgLoading" v-else>
    <div class="info-item" v-for="item in videoList" :key="item.id" @click="goDetail(type,item.id)">
      <img :src="item.url" alt="" class="img">
      <img src="@/assets/home/bofang.png" alt="" class="video-img">
      <div class="text">
        {{item.name}}
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {getSwiperListApi} from "@/api/spotlight";
import {getVideoListApi} from "@/api/video";
import Top from "@/components/Top";
import Nav from "@/components/Nav";
import Bottom from "@/components/Bottom";
import BackHome from "@/components/BackHome";

export default {
  name: "list",
  components:{
    Top,
    Nav,
    Bottom,
    BackHome
  },
  data(){
    return{
      imgList:[],
      videoList:[],
      limit: 10,
      page: 1,
      count: 0,
      imgLoading:false,
      type:''
    }
  },
  methods:{
    goDetail(type,id,url=''){
      if(type == 1){
        //图片
        if(url!=''){
          window.open(url)
          return
        }

        const routeInfo = this.$router.resolve({
          name: 'imageDetail', // 路由的名字
          query: { id: id }, // 如果有参数
        });

        // 使用 window.open 打开新的页面
        window.open(routeInfo.href || routeInfo.url); // 兼容不同版本的 Vue Router
      }else{
        //视频
        const routeInfo = this.$router.resolve({
          name: 'videoDetail', // 路由的名字
          query: { id: id }, // 如果有参数
        });

        // 使用 window.open 打开新的页面
        window.open(routeInfo.href || routeInfo.url); // 兼容不同版本的 Vue Router
      }
    },
    getImgList() {
      this.imgLoading = true
      getSwiperListApi( {limit:999,category_id:23}).then((res) => {
        this.imgList = res.result;
      }).finally(()=>{
        this.imgLoading = false
      })
    },
    //视频集锦
    getVideoList() {
      this.imgLoading = true
      getVideoListApi( {limit:999}).then((res) => {
        this.videoList = res.result;
      }).finally(()=>{
        this.imgLoading = false
      })
    },
  },
  mounted() {
    this.utils.createParams(this,this.$route.query);
    console.log(this.type)
    if(this.type==1)
    {
      this.getImgList()
    }
    else{
      this.getVideoList()
    }
  }
}
</script>

<style scoped lang="scss">
.list-page{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  .info-block{
    width: 1000px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    .info-item:nth-child(5n){
      margin-right: 0;
    }
    .info-item{
      width: calc((100% - 40px)/4);
      margin-bottom: 20px;
      margin-right: 10px;
      img{
        height: 180px;
        width: 100%;
        border-radius: 5px;
      }
      .video-img{
        position: absolute;
        width: 40px;
        height: 40px;
        margin-left: -130px;
        margin-top: 80px;
      }
      .name{
        margin-top: 5px;
      }
      .text{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
